<!-- 令牌出售 -->
<template>
  <div class="pag" >
      <cube-popup type="my-popup" v-show="showNotice" ref="upgradeMember" class="my-popup" maskClosable>
          <div class="active-ct">
              <div class="upgrade-member">
                  <h2>提示</h2>
                  <h3>是否要撤销该官方回购令牌订单？</h3>
                  <div class="submit-btn">
                      <span @click="confirmWithdraw">是</span>
                      <span @click="cancel">否</span>
                  </div>
              </div>
          </div>
      </cube-popup>
      <div class="top-info">
          <div class="token-title">
              <h4><span>*</span>根据申请回购队列顺序，官方每日回购200块令牌。</h4>
          </div>
          <div class="queue-title">
              <div>回购数量</div><div>本单获得</div><div>队列排名</div><div>预计回购时间</div>
          </div>
      </div>
      <div class="scroll-area">
          <div class="code-content">
              <div class="no-result-wrapper" v-show="offerList.length == 0">
                  <h2 class="no-result">
                      <img src="~assets/images/miningBoard/unstarted.png" alt="">
                      暂无明细
                  </h2>
              </div>
              <div class="scroll-list-wrap" v-show="offerList.length > 0">
                  <cube-scroll ref="scroll1" :data="offerList" :options="options" @pulling-up="onPullingUp">
                      <div class="code-item" v-for="(item, index) in offerList">
                          <!--<img v-if="item.status == 4" class="sold-out" src="~assets/images/token/soldout.png" alt="" />
                          <img v-if="item.status == 5" class="sold-out" src="~assets/images/token/cancelled.png" alt="" />-->
                          <div class="title">
                              <span> {{item.createTime}}</span>
                              <i>{{item.orderNo}}</i>
                              <!--<i>{{item.status == 1 ? '已售完' : '&nbsp;'}}</i>-->
                              <!--<strong @click="openNoticeModal(1)" :class="{'delete': item.status == 1}" v-if="item.status == 1">删除信息</strong>-->
                              <!--<strong @click="openNoticeModal(0, item.orderNo)" v-if="item.status == 1">撤销</strong>-->
                          </div>
                          <div class="detail">
                              <div>
                                  <!--<h3>预计出售</h3>-->
                                  <p>{{item.num}}</p>
                              </div>
                              <div>
                                  <!--<h3>单价</h3>-->
                                  <p>{{item.totalPrice}}CVNT</p>
                              </div>
                              <div>
                                  <!--<h3>已出售</h3>-->
                                  <p>{{item.ranking}}</p>
                              </div>
                              <div>
                                  <!--<h3>总价</h3>-->
                                  <p>{{Math.ceil(Number(item.ranking) / 200)}}天后</p>
                              </div>
                              <div @click="openNoticeModal(item.orderNo)">
                                  <strong>撤销</strong>
                              </div>
                          </div>
                      </div>
                  </cube-scroll>
              </div>
          </div>
      </div>
  </div>

</template>

<script>
  /*import md5 from 'js-md5';
  import 'common/js/gt';*/
  import {buyBackQueueList, buyBackOrderCancel} from 'api/register'

  export default {
    components: {

    },
    data() {
      return {
        uid: '',
        token: '',
        offerList: [
          /*{createTime: '2019/04/21 12:23:33', sellOut: 8, status: 1, unitPrice: '142.22', num: 8, totalPrice: '935.11', orderNo: ''}*/
        ],
        options: {
          click: true,
          tap: true,
          pullUpLoad: true
        },
        showNotice: false,
        per: 20,
        page: 1,
        sw: true,
        orderNo: ''
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        let query = to.query;
        Object.assign(vm, query);
        vm.uid = query.uid;
        vm.token = query.token;
        vm.setNormalStatus();
        // vm.getUserTokenInfo();
        vm.getBuyBackQueueList();
        // vm.getTokenTradeList();
      })
    },
    mounted() {
      // this.getRegister_ini();
    },
    watch: {

    },
    beforeDestroy() {

    },
    methods: {
      setNormalStatus() {
        this.showNotice = false;
      },
      getBuyBackQueueList() {
        buyBackQueueList().then((data) => {
          // console.log(data);
          if (data.data && data.data.length > 0) {
            this.offerList = data.data;
          }
          if (!data.data || data.data == null || data.data.length == 0) {
            this.offerList = [];
          }
        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      onPullingUp() {
        this.page++;
        if (this.sw) {
          mySaleTradeList(this.per, this.page).then((data) => {
            if (data.data && data.data.length > 0) {
              this.offerList = this.offerList.concat(data.data);
              this.sw = true;
            }
            if (!data.data || data.data == null || data.data.length == 0) {
              this.sw = false;
              this.options.pullUpLoad = false;
              return;
            }
          }).catch((err) => {
              this.showToast(err.info, 'warn');
          })
        }
      },
      openNoticeModal(orderNo) {
        this.showNotice = true;
        this.orderNo = orderNo;
      },
      cancel() {
        this.showNotice = false;
      },
      confirmWithdraw() {
        if (this.isCancelling) {
          return;
        }
        this.isCancelling = true;
        buyBackOrderCancel({orderNo: this.orderNo}).then((data) => {
          console.log(data);
          if (data.status && data.status == 1) {
            this.isCancelling = false;
            /*this.page = 1;
            this.sw = true;
            this.options.pullUpLoad = true;*/
            this.getBuyBackQueueList();
            this.showNotice = false;
            this.showToast('撤销成功', 'succcess');
          }
        }).catch((err) => {
          this.isCancelling = false;
          this.showToast(err.info, 'warn');
        })
      },
      confirmDelete() {
        this.showNotice = false;
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      },
      toastTip (info) {
        this.$warn(info)
      }
    }
  }
</script>

<style lang="scss" scoped>


  .pag {
    background: #F5F5FB;
    height: 100%;
    font-size:30px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .token-title {
    height:72px;
    line-height:72px;
    background:linear-gradient(0deg,rgba(75,115,203,1),rgba(54,77,186,1));
    h4{
      font-size:24px;
      color:#fff;
      text-align:center;
      span{
        color:#FFA4A3;
      }
    }
  }
  .queue-title{
    display:flex;
    height:90px;
    line-height:90px;
    margin-bottom:14px;
    padding:0 30px;
    font-size:24px;
    background:rgba(255,255,255,1);
    color:#202C5B;
    >div:first-child{
      width:22.46%;
    }
    >div:nth-child(2){
      width:22.46%;
    }
    >div:nth-child(3){
      width:24.49%;
    }
    >div:last-child{
      width:32.61%;
    }
  }





  .scroll-area{
    width:690px;
    height:calc(100% - 176px);
    margin: 0 auto;
    /*padding-top:30px;*/
    .third-party{
      /*padding-top:24px;*/
      margin:0 30px 24px;
      /*height:36px;
      line-height:36px;*/
      font-size:34px;
      color:#202C5B;
      span{
        display:inline-block;
        width:6px;
        height:36px;
        margin-right:15px;
        background:rgba(43,117,243,1);
      }
    }
  }
  .code-content{
    /*height:calc(100% - 84px);*/
    height:100%;
    .no-result-wrapper{
      position:relative;
      height:100%;
      h2{
        /*padding:12px 0;*/
        position:absolute;
        width:250px;
        height:330px;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        text-align:center;
        color: #838899;
        font-size:26px;
        img{
          display:block;
          margin:0 auto 20px;
          width:250px;
          height:274px;
        }
      }
    }
    /*h2{
      padding:12px 0;
      text-align:center;
      color: #838899;
      font-size:28px;
    }*/
  }
  .scroll-list-wrap{
    height:100%;
    /*background:#fff;*/
  }
  .code-item{
    position:relative;
    width:690px;
    margin:1px auto 23px;
    padding: 0 0 14px;
    /*padding: 32px 0 32px;*/
    box-shadow:0 0 6px 0 rgba(102,102,102,0.3);
    border-radius:14px;
    background:#fff;
    .sold-out{
      position:absolute;
      top:0;
      right:0;
      width:106px;
      height:90px;
    }
    .title{
      display:flex;
      margin-bottom:14px;
      justify-content:space-between;
      align-items:center;
      padding:9px 15px 9px 15px;
      background:rgba(255,164,163,1);
      border-radius:10px 10px 0 0;
      span{
        /*width:270px;*/
        /*padding:2px 21px 3px 13px;*/
        /*background:rgba(23,62,143,0.4);*/
        /*border-radius:0 14px 14px 0;*/
        font-size:24px;
        color:rgba(255,255,255,1);
        white-space:nowrap;
      }
      i{
        flex:1;
        text-align:right;
        font-size:24px;
        color:rgba(255,255,255,1);
        font-style:normal;
        white-space:nowrap;
      }
      strong{
        display:inline-block;
        width:142px;
        padding:14px 0 13px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:10px 0 0 10px;
        font-size:26px;
        color:rgba(255,255,255,1);
        cursor:pointer;
      }
      .delete{
        background:rgba(156,172,208,1);
      }
    }
    .adjust-margin-bottom{
      margin-bottom:41px;
    }
    .detail{
      display:flex;
      /*margin-top:32px;*/
      justify-content:space-between;
      align-items:center;
      padding:0 0 0 32px;
      >div{
        h3{
          margin-bottom:16px;
          font-size:24px;
          color:rgba(113,118,140,1);
        }
        p{
          font-size:26px;
          font-weight:600;
          color:rgba(32,44,91,1);
        }
        strong{
          display:inline-block;
          padding:14px 23px;
          background:rgba(23,62,143,1);
          border-radius:10px 0 0 10px;
          font-size:26px;
          color:rgba(255,255,255,1);
          cursor:pointer;
        }
      }
      >div:first-child{
        flex:0.3;
        text-align:left;
      }
      >div:nth-child(2){
        flex:1;
        text-align:center;
      }
      >div:nth-child(3){
        flex:0.55;
        text-align:center;
      }
      >div:nth-child(4){
        flex:0.8;
        text-align:center;
      }
      >div:last-child{
        /*margin-left:20px;*/
      }
    }
  }
  .adjust-opacity{
    background:rgba(255,255,255,0.5);
    .title{
      span{
        background:rgba(23,62,143,0.2);
        color:rgba(255,255,255,0.5);
      }
    }
    .detail{
      >div{
        h3{
          color:rgba(113,118,140,0.5);
        }
        p{
          color:rgba(32,44,91,0.5);
        }
        strong{
          background:rgba(23,62,143,0.5);
          color:rgba(255,255,255,0.5);
        }
      }
    }
  }

  .mask{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.5);

    .general-height{
      /*height: 500px;*/
      height: 67.46vh;
      background:rgba(255,255,255,1);
    }
    .title{
      position:relative;
      padding:29px 0 28px;
      font-size:34px;
      border-bottom:1px solid rgba(245,245,245,1);
      color:#202C5B;
      text-align:center;
      img{
        position:absolute;
        left:30px;
        top:27px;
        width:20px;
        height:34px;
      }
    }
    .number-group{
      position:absolute;
      z-index:9992;
      bottom:0;
      left:0;
      right:0;
      height:448px;
      >div:first-child{
        border-top:1px solid rgba(245,245,245,1);
      }
      .number-btn{
        display:flex;
        div{
          flex:1;
          height:111px;
          line-height:111px;
          font-size:50px;
          color:#333;
          text-align:center;
          border-bottom:1px solid rgba(245,245,245,1);
          border-right:1px solid rgba(245,245,245,1);
          -webkit-tap-highlight-color:rgba(0,0,0,0.15);
        }
        div:active{
          background:rgba(0,0,0,0.15);
        }
        div:last-child{
          border-right:none;
        }
        .no-num{
          background:#e3e7ee;
          img{
            width:44px;
            height:32px;
            display:block;
            margin:40px auto;
          }
        }
      }
    }
    .shopping-detail{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;

      .content{
        margin:97px 30px 0;
        h2{
          margin-bottom:66px;
          text-align:center;
          font-size:30px;
          color:#202C5B;
          font-weight:600;
          span{
            font-size:72px;
          }
        }
        p{
          display:flex;
          justify-content:space-between;
          font-size:28px;
          padding-bottom:29px;
          border-bottom:1px solid #ececec;
          span{
            color:#71768C;
          }
          strong{
            color:#202C5B;
          }
          input{
            width:250px;
            height:84px;
            text-indent:15px;
            background:rgba(248,248,248,1);
            border:1px solid rgba(23,62,143,1);
            border-radius:6px;
          }
        }
        p:last-child{
          margin-top:30px;
        }
        h4{
          line-height:1.45;
          font-size:28px;
          text-align:center;
          color:#71768C;
          span{
            color:#EB3257;
          }
        }
      }
      .confirm-content{
        margin:32px 30px 0;
        h1{
          margin-bottom:47px;
          font-size:28px;
          color:#71768C;
          text-align:center;
          span{
            color:#EB3257;
          }
        }
        h3{
          margin-bottom:38px;
          font-size:28px;
          color:#202C5B;
          text-align:center;
        }
        .number{
          margin-top:30px;
        }
        .buy-back{
          margin-bottom:52px;
          align-items:center;
        }
      }
      .official-content{
        p{
          padding-bottom:52px;
          align-items:center;
          border-bottom:none;
        }
      }
      .result{
        /*margin-top:97px;*/
        margin-top:45px;
        text-align:center;
        img{
          width:80px;
          height:80px;
          margin-bottom:41px;
        }
        h3{
          margin-bottom:60px;
          font-size:28px;
          color:#202C5B;
        }
        p{
          font-size:28px;
          color:#71768C;
        }
      }
      .pay-btn{
        position:absolute;
        bottom:30px;
        height:84px;
        line-height:84px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:8px;
        color:#fff;
        width:calc(100% - 60px);
        margin:0 30px;
        font-size:34px;
      }
    }
    .pay-password{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .password-wrapper{
        display:flex;
        margin:43px 30px 0;
        height:88px;
        line-height:88px;
        border:1px solid rgba(209,209,209,1);
        border-radius:10px;
        span{
          flex:1;
          text-align:center;
          border-right:1px solid rgba(209,209,209,1);
          strong{
            display:block;
            width:20px;
            height:20px;
            border-radius:50%;
            background:#333;
            margin:34px auto;
          }
        }
        span:last-child{
          border-right:none;
        }
      }
      .forget-password{
        color:#1253FC;
        width:25%;
        padding:12px 0;
        margin:12px auto 0;
        text-align:center;
        font-size:28px;
      }
      .pay-loading{
        position:absolute;
        z-index:9993;
        bottom:0;
        left:0;
        right:0;
        height:calc(100% - 70px);
        background:#fff;
        .paying{
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%, -50%);
          text-align:center;
          font-size:30px;
          color:#4B74E8;
          img{
            display:block;
            width:40px;
            height:40px;
            margin:0 auto 15px;
          }
        }
      }

    }
    .id-check{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .check-title{
        position:relative;
        img{
          position:absolute;
          left:30px;
          top:29px;
          width:34px;
          height:34px;
        }
      }
      .check-content{
        margin-top:32px;
        padding:0 30px;
        p{
          text-align:center;
          color:#202C5B;
          font-size:26px;
          line-height:1.5;
        }
        .sms-input{
          height:84px;
          line-height:84px;
          margin-top:28px;
          input{
            display:inline-block;
            height:84px;
            line-height:84px;
            width:59.9999%;
            text-indent:22px;
            font-size:30px;
            border-radius:10px 0 0 10px;
            border:1px solid rgba(227,227,227,1);
            border-right:none;
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
          span{
            display:inline-block;
            width:39.9999%;
            height:84px;
            line-height:84px;
            border-radius:0 10px 10px 0;
            vertical-align:top;
            background:#D1D1D1;
            color:#fff;
            font-size:30px;
            text-align:center;
            /*border:1px solid rgba(227,227,227,1);
            border-left:none;*/
          }
        }
        .finish-btn{
          height:84px;
          line-height:84px;
          margin-top:32px;
          text-align:center;
          color:#fff;
          font-size:34px;
          border-radius:8px;
          background:rgba(23,62,143,0.5);
        }
        .success{
          background:rgba(23,62,143,1);
        }
      }
    }
  }

  .active-ct {
    .upgrade-member {

      margin: 0 auto 35px;
      width: 634px;
      /*height: 481px;*/
      /*height: 380px;*/
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      background:#fff;
      border-radius:14px;
      h2{
        margin:92px auto 36px;
        font-size:32px;
        text-align:center;
        color:#202C5B;
      }

      h3{
        margin:0 auto 80px;
        text-align:center;
        font-size:30px;
        line-height:1.5;
        color:#202C5B;
      }
      h4{
        font-size:13px;
        text-align:center;
      }
      .submit-btn{
        height:108px;
        line-height:108px;
        width:100%;
        font-size:0;
        margin:15px auto 0;
        border-top:1px solid #D0D4E4;
        text-align:center;
        span{
          display:inline-block;
          width:49.99999%;
          border-radius:5px;
          font-size:30px;
          color:#1253FC;
        }
        span:last-child{
          color:#1253FC;
          border-left:1px solid #D0D4E4;
          /*margin-right:10px;*/
        }
      }
    }
  }


  .fixed-position{
    position:fixed;
  }
  .static-position{
    position:absolute;
  }

  .fade-enter-active, .fade-leave-active{
    /*opacity:1;
    background: rgba(7, 17, 27, 0.8);*/
    transition: all 0.5s;
    transform:translate(0, 0);
  }
  .fade-enter, .fade-leave-active{
    /*opacity:0;
    background:rgba(7, 17, 27, 0);*/
    transform: translate(0, 100%);
  }
  input::-webkit-input-placeholder{
    color: #B7C3D1;
    font-size:26px;
  }
</style>
<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    max-height:6em;
    line-height:40px;
  }
  .cube-toast.cube-popup {
    z-index: 10000!important;
  }
</style>











